<template>
  <div class="powerup-indicator">
    <div class="powerup-label">
      <span class="label-text">道具效果</span>
      <span class="active-count">{{ activePowerUps.length }}/{{ maxSlots }}</span>
    </div>
    
    <div class="powerup-slots">
      <!-- 激活的道具 -->
      <div 
        v-for="(powerUp, index) in activePowerUps"
        :key="powerUp.id"
        class="powerup-slot active"
        :class="[
          `powerup-${powerUp.type}`,
          { 'expiring': isExpiring(powerUp) }
        ]"
        :title="getPowerUpTooltip(powerUp)"
        @click="showPowerUpDetails(powerUp)"
      >
        <div class="powerup-icon">
          <i :class="getPowerUpIcon(powerUp.type)"></i>
        </div>
        
        <div class="powerup-timer">
          <div class="timer-text">{{ formatTime(powerUp.remainingTime) }}</div>
          <div 
            class="timer-bar"
            :style="{ 
              width: getTimerPercentage(powerUp) + '%',
              backgroundColor: getTimerColor(powerUp)
            }"
          ></div>
        </div>
        
        <!-- 道具等级指示器 -->
        <div v-if="powerUp.level > 1" class="powerup-level">
          {{ powerUp.level }}
        </div>
        
        <!-- 叠加效果指示器 -->
        <div v-if="powerUp.stacks > 1" class="powerup-stacks">
          ×{{ powerUp.stacks }}
        </div>
      </div>
      
      <!-- 空槽位 -->
      <div 
        v-for="n in Math.max(0, maxSlots - activePowerUps.length)"
        :key="'empty-' + n"
        class="powerup-slot empty"
        :title="'空槽位 ' + (activePowerUps.length + n)"
      >
        <div class="powerup-icon">
          <i class="icon-plus"></i>
        </div>
      </div>
    </div>

    <!-- 道具队列 -->
    <div v-if="queuedPowerUps.length > 0" class="powerup-queue">
      <div class="queue-label">等待激活</div>
      <div class="queue-items">
        <div 
          v-for="(powerUp, index) in queuedPowerUps.slice(0, 3)"
          :key="powerUp.id"
          class="queue-item"
          :class="`powerup-${powerUp.type}`"
          :title="powerUp.name"
        >
          <i :class="getPowerUpIcon(powerUp.type)"></i>
        </div>
        <div v-if="queuedPowerUps.length > 3" class="queue-more">
          +{{ queuedPowerUps.length - 3 }}
        </div>
      </div>
    </div>

    <!-- 道具详情弹窗 -->
    <div v-if="selectedPowerUp" class="powerup-details" @click="closePowerUpDetails">
      <div class="details-content" @click.stop>
        <div class="details-header">
          <div class="powerup-icon large">
            <i :class="getPowerUpIcon(selectedPowerUp.type)"></i>
          </div>
          <div class="powerup-info">
            <h3>{{ selectedPowerUp.name }}</h3>
            <p>{{ selectedPowerUp.description }}</p>
          </div>
          <button class="close-btn" @click="closePowerUpDetails">
            <i class="icon-close"></i>
          </button>
        </div>
        
        <div class="details-stats">
          <div class="stat-item">
            <span class="stat-label">剩余时间</span>
            <span class="stat-value">{{ formatTime(selectedPowerUp.remainingTime) }}</span>
          </div>
          <div v-if="selectedPowerUp.level > 1" class="stat-item">
            <span class="stat-label">等级</span>
            <span class="stat-value">{{ selectedPowerUp.level }}</span>
          </div>
          <div v-if="selectedPowerUp.stacks > 1" class="stat-item">
            <span class="stat-label">叠加</span>
            <span class="stat-value">×{{ selectedPowerUp.stacks }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">效果强度</span>
            <span class="stat-value">{{ selectedPowerUp.effectStrength }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

/**
 * 道具指示器组件
 * 显示激活的道具效果、剩余时间和道具队列
 * @component
 * @example
 * <PowerUpIndicator 
 *   :active-power-ups="activePowerUps"
 *   :queued-power-ups="queuedPowerUps"
 *   :max-slots="4"
 * />
 */

interface PowerUp {
  /** 道具唯一标识 */
  id: string
  /** 道具类型 */
  type: 'magnet' | 'speedBoost' | 'shield' | 'doubleScore' | 'extraLife' | 'invincible'
  /** 道具名称 */
  name: string
  /** 道具描述 */
  description: string
  /** 剩余时间（秒） */
  remainingTime: number
  /** 总持续时间（秒） */
  totalDuration: number
  /** 道具等级 */
  level?: number
  /** 叠加次数 */
  stacks?: number
  /** 效果强度（百分比） */
  effectStrength?: number
}

interface Props {
  /** 激活的道具列表 */
  activePowerUps?: PowerUp[]
  /** 排队等待的道具列表 */
  queuedPowerUps?: PowerUp[]
  /** 最大道具槽位数 */
  maxSlots?: number
  /** 即将过期的时间阈值（秒） */
  expiringThreshold?: number
}

interface Emits {
  /** 道具即将过期 */
  (e: 'powerup-expiring', powerUp: PowerUp): void
  /** 道具过期 */
  (e: 'powerup-expired', powerUp: PowerUp): void
  /** 点击道具 */
  (e: 'powerup-clicked', powerUp: PowerUp): void
}

const props = withDefaults(defineProps<Props>(), {
  activePowerUps: () => [],
  queuedPowerUps: () => [],
  maxSlots: 4,
  expiringThreshold: 5
})

const emit = defineEmits<Emits>()

// 响应式数据
const selectedPowerUp = ref<PowerUp | null>(null)

// 计算属性
const activePowerUps = computed(() => props.activePowerUps)
const queuedPowerUps = computed(() => props.queuedPowerUps)
const maxSlots = computed(() => props.maxSlots)

/**
 * 获取道具图标类名
 * @param type - 道具类型
 * @returns 图标类名
 */
const getPowerUpIcon = (type: string): string => {
  const iconMap: Record<string, string> = {
    magnet: 'icon-magnet',
    speedBoost: 'icon-speed',
    shield: 'icon-shield',
    doubleScore: 'icon-star',
    extraLife: 'icon-heart',
    invincible: 'icon-diamond'
  }
  return iconMap[type] || 'icon-question'
}

/**
 * 获取道具提示信息
 * @param powerUp - 道具对象
 * @returns 提示文本
 */
const getPowerUpTooltip = (powerUp: PowerUp): string => {
  let tooltip = `${powerUp.name}\n${powerUp.description}\n剩余时间: ${formatTime(powerUp.remainingTime)}`
  
  if (powerUp.level && powerUp.level > 1) {
    tooltip += `\n等级: ${powerUp.level}`
  }
  
  if (powerUp.stacks && powerUp.stacks > 1) {
    tooltip += `\n叠加: ×${powerUp.stacks}`
  }
  
  return tooltip
}

/**
 * 格式化时间显示
 * @param seconds - 秒数
 * @returns 格式化的时间字符串
 */
const formatTime = (seconds: number): string => {
  if (seconds < 0) return '0s'
  
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  
  if (mins > 0) {
    return `${mins}:${secs.toString().padStart(2, '0')}`
  } else {
    return `${secs}s`
  }
}

/**
 * 获取计时器百分比
 * @param powerUp - 道具对象
 * @returns 百分比值
 */
const getTimerPercentage = (powerUp: PowerUp): number => {
  if (powerUp.totalDuration <= 0) return 0
  return Math.max(0, Math.min(100, (powerUp.remainingTime / powerUp.totalDuration) * 100))
}

/**
 * 获取计时器颜色
 * @param powerUp - 道具对象
 * @returns 颜色值
 */
const getTimerColor = (powerUp: PowerUp): string => {
  const percentage = getTimerPercentage(powerUp)
  
  if (percentage > 50) {
    return '#4CAF50' // 绿色
  } else if (percentage > 20) {
    return '#FFC107' // 黄色
  } else {
    return '#F44336' // 红色
  }
}

/**
 * 判断道具是否即将过期
 * @param powerUp - 道具对象
 * @returns 是否即将过期
 */
const isExpiring = (powerUp: PowerUp): boolean => {
  return powerUp.remainingTime <= props.expiringThreshold
}

/**
 * 显示道具详情
 * @param powerUp - 道具对象
 */
const showPowerUpDetails = (powerUp: PowerUp): void => {
  selectedPowerUp.value = powerUp
  emit('powerup-clicked', powerUp)
}

/**
 * 关闭道具详情
 */
const closePowerUpDetails = (): void => {
  selectedPowerUp.value = null
}
</script>

<style lang="scss" scoped>
.powerup-indicator {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  padding: $spacing-md;
  background: rgba(0, 0, 0, 0.8);
  border-radius: $border-radius-md;
  color: white;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 200px;

  .powerup-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .label-text {
      font-size: 0.75rem;
      opacity: 0.8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .active-count {
      font-size: 0.75rem;
      font-weight: bold;
      color: $accent-color;
    }
  }

  .powerup-slots {
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;

    .powerup-slot {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      padding: $spacing-xs $spacing-sm;
      border-radius: $border-radius-sm;
      transition: $transition-normal;
      position: relative;
      cursor: pointer;

      &.active {
        background: rgba(255, 255, 255, 0.1);
        
        &:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: translateX(4px);
        }

        &.expiring {
          animation: powerupExpiring 1s ease-in-out infinite;
        }
      }

      &.empty {
        opacity: 0.3;
        cursor: default;
        
        &:hover {
          opacity: 0.5;
        }
      }

      .powerup-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: $primary-color;
        flex-shrink: 0;
        
        i {
          font-size: 16px;
          color: white;
        }

        &.large {
          width: 48px;
          height: 48px;
          
          i {
            font-size: 24px;
          }
        }
      }

      .powerup-timer {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;

        .timer-text {
          font-size: 0.75rem;
          font-weight: bold;
          font-family: 'Courier New', monospace;
        }

        .timer-bar {
          height: 4px;
          background: $success-color;
          border-radius: 2px;
          transition: width 0.3s ease, background-color 0.3s ease;
        }
      }

      .powerup-level {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        background: $accent-color;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        font-weight: bold;
      }

      .powerup-stacks {
        position: absolute;
        bottom: -4px;
        right: -4px;
        background: $secondary-color;
        color: white;
        padding: 1px 4px;
        border-radius: $border-radius-sm;
        font-size: 0.625rem;
        font-weight: bold;
      }

      // 道具类型特定样式
      &.powerup-magnet .powerup-icon { background: #9C27B0; }
      &.powerup-speedBoost .powerup-icon { background: #FF5722; }
      &.powerup-shield .powerup-icon { background: #2196F3; }
      &.powerup-doubleScore .powerup-icon { background: #FF9800; }
      &.powerup-extraLife .powerup-icon { background: #E91E63; }
      &.powerup-invincible .powerup-icon { background: #00BCD4; }
    }
  }

  .powerup-queue {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: $spacing-sm;

    .queue-label {
      font-size: 0.625rem;
      opacity: 0.6;
      margin-bottom: $spacing-xs;
      text-transform: uppercase;
    }

    .queue-items {
      display: flex;
      gap: $spacing-xs;
      align-items: center;

      .queue-item {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        
        i {
          font-size: 12px;
        }
      }

      .queue-more {
        font-size: 0.625rem;
        opacity: 0.6;
        margin-left: $spacing-xs;
      }
    }
  }

  .powerup-details {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .details-content {
      background: white;
      color: $text-color;
      padding: $spacing-lg;
      border-radius: $border-radius-lg;
      max-width: 400px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;

      .details-header {
        display: flex;
        align-items: flex-start;
        gap: $spacing-md;
        margin-bottom: $spacing-lg;

        .powerup-info {
          flex: 1;

          h3 {
            margin: 0 0 $spacing-xs 0;
            color: $primary-color;
          }

          p {
            margin: 0;
            font-size: 0.875rem;
            opacity: 0.8;
          }
        }

        .close-btn {
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: $text-secondary;
          
          &:hover {
            color: $text-color;
          }
        }
      }

      .details-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $spacing-sm;

        .stat-item {
          display: flex;
          justify-content: space-between;
          padding: $spacing-xs;
          background: $bg-secondary;
          border-radius: $border-radius-sm;

          .stat-label {
            font-size: 0.75rem;
            opacity: 0.8;
          }

          .stat-value {
            font-weight: bold;
            font-family: 'Courier New', monospace;
          }
        }
      }
    }
  }
}

// 动画定义
@keyframes powerupExpiring {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: $danger-color;
    box-shadow: 0 0 8px rgba($danger-color, 0.4);
  }
}

// 图标样式
.icon-magnet::before { content: '🧲'; }
.icon-speed::before { content: '⚡'; }
.icon-shield::before { content: '🛡️'; }
.icon-star::before { content: '⭐'; }
.icon-heart::before { content: '❤️'; }
.icon-diamond::before { content: '💎'; }
.icon-plus::before { content: '+'; }
.icon-question::before { content: '?'; }
.icon-close::before { content: '×'; }

// 响应式设计
@media (max-width: $breakpoint-md) {
  .powerup-indicator {
    min-width: 150px;
    padding: $spacing-sm;

    .powerup-slots .powerup-slot {
      .powerup-icon {
        width: 28px;
        height: 28px;
        
        i {
          font-size: 14px;
        }
      }

      .powerup-timer .timer-text {
        font-size: 0.625rem;
      }
    }
  }
}
</style>